<template>
  <div class="video-player">
      <div>
          <el-tabs v-model="ID" type="card" style="justify-content: start;" @tab-click="handleClick">
          <el-tab-pane
            v-for="item in originalData"
            :key="item.ID"
            :label="item.NAME"
            :name="item.ID"
          >
          </el-tab-pane>
        </el-tabs>
        </div>
    <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin"> 
    </div>
    <div class="down" v-else>
        <a href="http://www.lhyh.cn/iSecure_Center.exe">下载</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "videoPlayer",
  props:{
      cameraIndexCode:{type:String,default:''},
      layout:{type:String,default:'3x3'},
      videoDialog:{type:Boolean,default:true},
  },
  data() {
    return {
    //   ID: this.$route.query.VID.toString(),
      ID: '',
      originalData:[],
      plugin:true ,
      oWebControl:null,   //插件对象
      initCount:0,
      pubKey:'',         //公钥加密
      video_init_data:{
          appkey:'23894539',
          Secret:'9wV7Fp0yHJWfYApE2fhj',
          ip:'111.160.78.62',
          port:'444',
          snapDir:'D:\\SnapDir',
          videoDir:'D:\\VideoDir',
          layout:'3x3',
          encryptedFields:'secret',
          enableHttps:'1',
      },
      video_play_data:{
          cameraIndexCode:'',
          streamMode: 0,
          transMode: 1,
          gpuMode: 0,
          recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储 视频回放时用设备存储
          wndId:0,
          cascade: 1,
      },
      //videoWidth videoHeight screenWidth screenHeight 
      //这四个参数为了使插件大小和屏幕宽度一致变化
      videoWidth:700,
      videoHeight:500,
      screenWidth: document.documentElement.clientWidth,//屏幕宽度
      screenHeight: document.documentElement.clientHeight,//屏幕高度
     //设置窗口遮挡 根据浏览器大小变化视频插件的大小
      iLastCoverLeft : 0,
      iLastCoverTop : 0,
      iLastCoverRight : 0,
      iLastCoverBottom : 0,
    };
  },
  created(){
    this.getzzzlistdata ();
  },
  mounted(){
       
        //插件初始化
        this.initPlugin();
        this.getzzzlistdata ();
        this.$nextTick(()=>{
            this.videoWidth = this.$refs.divPlugin.offsetWidth;
            this.videoHeight = this.$refs.divPlugin.offsetHeight;
        })
        // 监听窗口变化
        let _this = this;
        window.onresize = function(){ // 定义窗口大小变更通知事件 
           _this.screenWidth = document.documentElement.clientWidth; //窗口宽度
           _this.screenHeight = document.documentElement.clientHeight; //窗口高度
        };
        window.addEventListener('scroll', function () {
            if (this.oWebControl != null) {
                this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
                this.setWndCover();
            }
        });
  },
  destroyed(){
        if (this.oWebControl != null){
            this.oWebControl.JS_Disconnect().then(function(){}, function() {});
        }
  },
  methods: {
    // 根据转运站ID，获取摄像头数据列表
    async getDataList () { 
      const params = {
        zzzID: this.ID,
      }
      console.log(params)
      const { data } = await this.$Http.get('/RubbishVehicle/GetStationHikInfo', { params })
      this.video_play_data.cameraIndexCode =''
      this.video_play_data.wndId =0
      if (data.length != 0) {
        data.forEach((val) => {
            this.video_play_data.cameraIndexCode = val.监控点编码
            this.video_play_data.wndId = this.video_play_data.wndId+1
            this.startRealPlay();
            console.log('监控点编号:',this.video_play_data.cameraIndexCode)
        });
        
      } else {
        this.$message.error('未获取到摄像头数据');
        this.endRealPlay();
      }
    },
    //获取转运站列表
    async getzzzlistdata () {
      var url = '/CarService/getPlaceStation?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      console.log(this.ID)
      if (this.ID == 0) {
        this.ID = this.originalData[0].ID
      }
      console.log(this.ID)
    },
    handleClick (tab, event) {
      var carInfo = this.originalData[tab.index]
      this.ID = carInfo.ID
      this.getDataList ()
    },
    //   插件初始化
      initPlugin () {
          let _this = this
              this.oWebControl = new WebControl({
                    szPluginContainer: "divPlugin",
                    iServicePortStart: 15900,
                    iServicePortEnd: 15909,
                    // 用于 IE10 使用 ActiveX 的 clsid 
                    szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
                    cbConnectSuccess: (e) => {
                        this.plugin=true;
                          _this.setCallbacks();
                          if(_this.oWebControl){
                              _this.oWebControl.JS_StartService("window", {
                                dllPath: "./VideoPluginConnect.dll" 
                               //dllPath: "./DllForTest-Win32.dll"
                          }).then( (res) => {
                                 _this.oWebControl.JS_CreateWnd("divPlugin",_this.videoWidth,_this.videoHeight).then(() => {
                                  console.log("JS_CreateWnd success");
                                  _this.initVideo();
                                });
                            }, function () {
                            });
                          }else{
                          }
                      },
                    cbConnectError: () => {
                          console.log("cbConnectError");
                          _this.oWebControl = null;
                          $("#divPlugin").html("插件未启动，正在尝试启动，请稍候...");
                          WebControl.JS_WakeUp("VideoWebPlugin://");
                          _this.initCount ++;
                          if (_this.initCount < 3) {
                                setTimeout(() => {
                                    _this.initPlugin();
                                }, 3000)
                          } else {
                                $("#divPlugin").html("插件启动失败，请检查插件是否安装！");
                                this.plugin=false;
                          }
                    },
                    
                    cbConnectClose: () => {
                          console.log("cbConnectClose");
                          this.oWebControl.JS_Disconnect().then(function(){}, function() {});
                          this.oWebControl = null;
              }
               });
    },    
// 设置窗口控制回调
    setCallbacks() {
        this.oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: this.cbIntegrationCallBack
        });
    },
    // 推送消息
    // cbIntegrationCallBack(oData) {
    //     this.$message.warning((JSON.stringify(oData.responseMsg)));
    // },
    // 初始化参数
    initVideo () {
        // console.log(this.getPubKey)
        this.getPubKey(() =>{
            let appkey = this.video_init_data.appkey;
            let secret = this.setEncrypt(this.video_init_data.Secret);
            let ip = this.video_init_data.ip;
            let szPort= this.video_init_data.port;
            let snapDir = this.video_init_data.snapDir;
            let videoDir = this.video_init_data.videoDir ;
            let layout = this.layout;
            let encryptedFields = ['secret'];

            appkey = appkey.replace(/(^\s*)/g, "");
            appkey = appkey.replace(/(\s*$)/g, "");

            secret = secret.replace(/(^\s*)/g, "");
            secret = secret.replace(/(\s*$)/g, "");

            ip = ip.replace(/(^\s*)/g, "");
            ip = ip.replace(/(\s*$)/g, "");

            szPort = szPort.replace(/(^\s*)/g, "");
            szPort = szPort.replace(/(\s*$)/g, "");

            snapDir = snapDir.replace(/(^\s*)/g, "");
            snapDir = snapDir.replace(/(\s*$)/g, "");

            videoDir = videoDir.replace(/(^\s*)/g, "");
            videoDir = videoDir.replace(/(\s*$)/g, "");

            let port = parseInt(szPort);
            let enableHttps = parseInt(this.video_init_data.enableHttps);
            let _this = this
            encryptedFields = encryptedFields.join(",");
            this.oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    appkey: appkey,
                    secret: secret,
                    ip: ip, 
                    playMode: 0, // 0-预览 1-回放
                    port: port,
                    snapDir: snapDir,
                    videoDir: videoDir,
                    layout: layout,
                    enableHTTPS: enableHttps,
                    encryptedFields: encryptedFields,
                    showToolbar : 1,                               //是否显示工具栏，0-不显示，非0-显示
			        showSmart : 1,                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
			        buttonIDs : "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769",  //自定义工具条按钮
                })
            }).then(function (oData) {
                console.log(JSON.stringify(oData ? oData.responseMsg : ''))
                // 预览
                _this.getDataList();
                // _this.startRealPlay();
                // _this.startPlayBack();
            });
        })
    },
    // 获取公钥
    getPubKey (callback) {
        // console.log(this.oWebControl,'oWebControloWebControl')
        this.oWebControl.JS_RequestInterface({
            funcName: "getRSAPubKey",
            argument: JSON.stringify({
                keyLength: 1024
            })
        }).then((oData) => {
            // console.log(oData)
             if (oData.responseMsg.data) {
                this.pubKey = oData.responseMsg.data
                callback()
            }
        })
    },
    // RSA加密
    setEncrypt (value) {
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(this.pubKey);
        return encrypt.encrypt(value);
    },
    // 视频预览
    startRealPlay (IndexCode) {
        console.log('------开始播放-------')
        let cameraIndexCode  = this.video_play_data.cameraIndexCode;
        let streamMode = this.video_play_data.streamMode;
        let transMode = this.video_play_data.transMode;
        let gpuMode = this.video_play_data.gpuMode;
        let wndId = this.video_play_data.wndId;  //默认为空闲窗口回放
        let cascade = this.video_play_data.cascade; 
        cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
        cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); 
        this.oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
                cameraIndexCode : cameraIndexCode ,
                streamMode: streamMode,
                transMode: transMode,
                gpuMode: gpuMode,
                wndId: wndId,
                cascade: cascade
            })
        }).then(function (oData) {
            console.log('err:',oData)
        });
    },
    // 关闭预览
    endRealPlay (IndexCode) {
        this.oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview",
            argument: JSON.stringify({
            })
        }).then(function (oData) {
            console.log('err:',oData)
        });
    },
    // 回放
    // startPlayBack (IndexCode) {
    //     console.log('------开始播放-------')
    //     let cameraIndexCode  = '0a1d14fb50ab4b048724ba578a2cf3ff';
    //     let startTimeStamp =  new Date(new Date().toLocaleDateString()).getTime(); // 录像查询开始时间戳，单位：秒
    //     let endTimeStamp = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1); // 录像查询结束时间戳，单位：秒
    //     let recordLocation = 1; // 录像存储类型 0-中心存储 1-设备存储
    //     let transMode = 1; // 传输协议 ，0-UDP 1-TCP
    //     let gpuMode = 1;
    //     let wndId = -1;  //默认为空闲窗口回放
    //     let cascade = 1;
    //     cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
    //     cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); 
    //     this.oWebControl.JS_RequestInterface({
    //         funcName: "startPlayback",
    //         argument: JSON.stringify({
    //             cameraIndexCode : cameraIndexCode ,
    //             startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),
    //             endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),
    //             recordLocation: recordLocation,
    //             transMode: transMode,
    //             gpuMode: gpuMode,
    //             wndId: wndId,
    //             cascade: cascade
    //         })
    //     }).then(function (oData) {
    //         console.log('err:',oData)
    //     });
    // },
    
    //根据窗口变化设置视频插件大小
    resizewindow(w,h){
        w = (w<1423)?1423:w
        h = (h<754)?754:h
        window.resizeTo(w ,h);
    },
    //设置窗口遮挡
    setWndCover() {
        let iWidth = document.body.clientWidth;
        let iHeight = document.body.clientHeight;
        let oDivRect = document.getElementById("divPlugin").getBoundingClientRect();
        let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
        let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
        let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
        let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
        iCoverLeft = (iCoverLeft > 700) ? 700 : iCoverLeft;
        iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
        iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight;
        iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
        if (this.iLastCoverLeft != iCoverLeft) {
            console.log("iCoverLeft: " + iCoverLeft);
            this.iLastCoverLeft = iCoverLeft;
            this.oWebControl.JS_SetWndCover("left", iCoverLeft);
        }
        if (this.iLastCoverTop != iCoverTop) {
            console.log("iCoverTop: " + iCoverTop);
            this.iLastCoverTop = iCoverTop;
            this.oWebControl.JS_SetWndCover("top", iCoverTop);
        }
        if (this.iLastCoverRight != iCoverRight) {
            console.log("iCoverRight: " + iCoverRight);
            this.iLastCoverRight = iCoverRight;
            this.oWebControl.JS_SetWndCover("right", iCoverRight);
        }
        if (this.iLastCoverBottom != iCoverBottom) {
            console.log("iCoverBottom: " + iCoverBottom);
            this.iLastCoverBottom = iCoverBottom;
            this.oWebControl.JS_SetWndCover("bottom", iCoverBottom);
        }
    },
    //关闭所有的播放画面   
    close_all(){ 
       this.oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
        }).then(function (oData) {
            console.log(JSON.stringify(oData ? oData.responseMsg : ''))
        });
    },
    // 切换路由时插件不遮挡页面
    getPath(){
        let _this = this
        if (this.$route.path != '/VideoSurveillance'){
            console.log(this.$route.path);
            this.oWebControl.JS_HideWnd();// 先让窗口隐藏
            this.endRealPlay();
        }else{
            this.ID = this.$route.query.VID
            this.initPlugin();
            _this.oWebControl.JS_ShowWnd();
        }
  }
  },
  watch:{
      '$route':'getPath',
      cameraIndexCode(n){
          this.startRealPlay();
          this.startPlayBack();
      },
      screenWidth(n,o){
          this.videoWidth = this.$refs.divPlugin.offsetWidth;
          this.videoHeight = this.$refs.divPlugin.offsetHeight;
          this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
          this.resizewindow(n,this.screenHeight);
          this.setWndCover();
      }, 
     screenHeight(n,o){
          this.videoWidth = this.$refs.divPlugin.offsetWidth;
          this.videoHeight = this.$refs.divPlugin.offsetHeight;
          this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
          this.resizewindow(this.screenWidth,n);
          this.setWndCover();
      },
      //海康的视频播放插件是默认最高层级这样会导致页面中的弹框等被遮挡，定义一个全局的变量videohide
      //当弹框出现时 视频插件隐藏，解决此问题。
      '$store.state.videohide'(n,o){
          if(n){
              this.oWebControl.JS_HideWnd();
           }else if(!n){
              this.oWebControl.JS_ShowWnd();
           }
      },
      videoDialog(n){
          if(n){
              this.initPlugin(); 
          } 
     }
  }
};
</script>
<style lang="less" scoped>
.video-player{
    width: 100%;
    height: 100%;
    .divPlugin{
        width: 100%;
        height: 94%;
        color:red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
    }
    .down{
        width: 100%;
        height: 100%;
        color:red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        a{
            color:red;
        }
    }
    
}
</style>
